<template>
  <div>
    <div id="chart">

    </div>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "s1_bar",
  metaInfo: {
    title: "Bar Chart",
  },
  data: function() {
    return {
      data: [4, 8, 15, 16, 23, 42],
      scale: null,
    }
  },
  created() {
    this.scale = d3.scaleLinear()
        .domain([0, d3.max(this.data)])
        .range([0, 210])
  },
  mounted() {
    const div = d3.select("#chart")
      .style("font", "10px sans-serif")
      .style("text-align", "right")
      .style("color", "white");

    div.selectAll("div")
      .data(this.data)
      .join("div")
      .style("background", "steelblue")
      .style("padding", "3px")
      .style("margin", "1px")
      .style("width", d => `${this.scale(d)}px`)
      .text(d => d);

    let node = div.node()
    console.log(node.innerHTML)
  }
}
</script>

<style scoped>

</style>
